<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="商品列表" />
    <div class="box">
      <div>
        <img :src="$imgHost + goods.img" alt="" />
      </div>
      <!-- <van-row>
        <van-col span="10">{{goods}}</van-col>
        <van-col  span="10" offset="4">span: 4</van-col>
      </van-row> -->
      <div class="txt">
        <div class="price clearfix">
          <!-- 价格 -->
          <b class="fl one"><em>&yen;</em>{{goods.price}}</b>
          <b class="fl two"><em>&yen;</em> <del>{{goods.market_price}}</del></b>
          <div class="priceRight fr">
            <a href="#">
              <i class="iconfont icon-shoucang"></i>
              <p>收藏</p>
            </a>
          </div>
        </div>
        <h3>{{goods.goodsname}}</h3>
        <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
        <span>11.11限时299元起</span>
        <div class="txtBot">
          <p class="txt1">
            此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场
          </p>
          <a href="#">查看》<span class="iconfont icon-jiantouyou"></span></a>
        </div>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        @click="showsku"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品规格 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsid"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import { getGoodDetail, addCart, getCurUserId ,checktoken} from "../request/api.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      goodsid: "",
      show: false,
      goods: {},
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "", // 用于预览显示的规格类目图片
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            price: 499999, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "4999.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
            extraDesc: "", // 可选值，附加描述文案
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showsku() {
      //显示商品规格
      this.show = true;
    },
    onBuyClicked() {
      //立即购买
      Toast("点击图标dwadaw");
    },
    onAddCartClicked(x) {
      //添加到购物车
      //   console.log(x,1111111111);
      let uid = getCurUserId();
      //参数数据
      let obj = {
        uid,
        goodsid: x.goodsId,
        num: x.selectedNum,
      };
      //   console.log(obj);
      addCart(obj) //添加到购物车
        .then((d) => {
          if (d.data.code == 200) {
            Toast.success("添加成功");
            this.show = false;
          }
          //   console.log(d);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    let id = this.$route.params.id;
    //   console.log(id);
    this.goodsid = id;
    //获取商品信息
    getGoodDetail({ id })
      .then((d) => {
        // console.log(d, 8888888888888888888);
        //商品id
        this.goods = d.data.list[0];
        // console.log(this.goods);
        this.sku.tree[0].v[0].name = this.goods.specsattr;
        this.sku.tree[0].v[0].imgUrl = "http://localhost:3000" + this.goods.img;
        this.sku.tree[0].v[0].previewImgUrl =
          "http://localhost:3000" + this.goods.img;
      })
      .catch((e) => {
        console.log(e);
      });
      //验证token是否有效
    checktoken()
      .then((d) => {
        if (d.data.code != 200) {
          this.$toast({
            message: d.data.msg,
            icon: "warning-o",
          });
        }
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__content {
  position: fixed;
  background-color: #ff6041;
  top: 0;
  left: 0;
  width: 100vw;
}
::v-deep .van-nav-bar__title,
::v-deep .van-icon-arrow-left:before {
  color: white;
  font-weight: bold;
}
.van-goods-action{
    height: 10vh;
}
.box {
  margin-top: 46px;
}
.box img {
  width: 100vw;
}
.txt {
  background-color: #fff;
  padding: 26px 21px 21px 21px;
}
.txt .price {
 
}
.txt .price span em {
  font-size: 28px;
  margin-left: 28px;
}
.txt .price .one {
  font: 24px/1 "微软雅黑";
  color: #ff6040;
}
.txt .price .two {
  font: 16px/1 "微软雅黑";
  color: #999999;
  margin-top: 5px;
}

.txt .price .priceRight a i,
.txt .price .priceRight a p {
  font: 12px/ "微软雅黑";
  color: #fe6141;
  margin-left: 5px;
}
.txt .price .priceRight i {
}
.txt .price .priceRight p {
}
.txt h3 {
  font: 16px/16px "微软雅黑";
  color: #333333;
  margin-top:10px;
}
.txt > p {
  font: 15px/32px "微软雅黑";
  color: #999999;
  margin-bottom: 10px;
      height: 26px;
    overflow: hidden;
}
.txt > span {
  display: inline-block;
  font: 12px/24px "微软雅黑";
  color: #fff;
  background-color: #ff8066;
}
.txt .txtBot {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
    margin-top: 10px;
}
.txt .txtBot > p {
  font: 14px/32px "微软雅黑";
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}
.txt .txtBot a {
  white-space: nowrap;
  font: 14px/32px "微软雅黑";
  color: #fe6141;

}
.txt .txtBot a > span {
  margin: auto;
  display: inline-block;
  margin-right: 14px;
}
</style>